<template>
  <div>
    <!--    <page-header-->
    <!--      title="项目前期"-->
    <!--      describe="项目前期列表，用于项目前期资料填报."-->
    <!--    ></page-header>-->


    <page-layout>
      <a-col>
        <a-card>
          <template #extra style=" position: fixed;top: 100px;right: 30px;z-index: 999;">
            <div v-if="editableData.data" class="editable-cell-input-wrapper">
              <a-popover v-model:visible="visible" title="是否确认提交！" trigger="click">
                <template #content>
                  <a style="margin-right: 10px;" @click="save">确认提交</a>
                  <a @click="hide">取消</a>
                </template>
                <a-button style="margin-right: 10px;" @click="hide" type="primary">取消编辑</a-button>
                <a-button type="primary">提交</a-button>
              </a-popover>
            </div>
            <div v-else class="editable-cell-text-wrapper">
              <a-button type="primary" style="margin-right: 10px;" @click="edit">编辑</a-button>
            </div>

            <!--          </template>-->

          </template>
          <a-tabs>
            <a-tab-pane key="1" tab="基本信息">
              <a-row>
                <a-col style="width:100%;">
                  <a-descriptions title="法人信息" bordered style="background-color: #fff !important;">
                    <a-descriptions-item label="企业名称">
                      <div class="editable-cell">
                        <div v-if="editableData.data" class="editable-cell-input-wrapper">
                          <a-input v-model:value="editableData.qymc" @pressEnter="save()" />
                        </div>
                        <div v-else class="editable-cell-text-wrapper">
                          {{formState.qymc}}
                        </div>
                      </div>
                    </a-descriptions-item>
                    <a-descriptions-item label="统一社会信用代码">
                      <div class="editable-cell">
                        <div v-if="editableData.data" class="editable-cell-input-wrapper">
                          <a-input v-model:value="editableData.xydm" @pressEnter="save()" />
                        </div>
                        <div v-else class="editable-cell-text-wrapper">
                          {{formState.xydm}}
                        </div>
                      </div>
                    </a-descriptions-item>
                    <a-descriptions-item label="所属省(市)">
                      <div class="editable-cell">
                        <div v-if="editableData.data" class="editable-cell-input-wrapper">
                          <a-input v-model:value="editableData.ssshengshi" @pressEnter="save()" />
                        </div>
                        <div v-else class="editable-cell-text-wrapper">
                          {{formState.ssshengshi}}
                        </div>
                      </div>
                    </a-descriptions-item>
                    <a-descriptions-item label="单位性质">
                      <div class="editable-cell">
                        <div v-if="editableData.data" class="editable-cell-input-wrapper">
                          <a-input v-model:value="editableData.dwxz" @pressEnter="save()" />
                        </div>
                        <div v-else class="editable-cell-text-wrapper">
                          {{formState.dwxz}}
                        </div>
                      </div>
                    </a-descriptions-item>
                    <a-descriptions-item label="管理方式">
                      <div class="editable-cell">
                        <div v-if="editableData.data" class="editable-cell-input-wrapper">
                          <a-input v-model:value="editableData.glfs" @pressEnter="save()" />
                        </div>
                        <div v-else class="editable-cell-text-wrapper">
                          {{formState.glfs}}
                        </div>
                      </div>
                    </a-descriptions-item>
                    <a-descriptions-item label="注册地址">
                      <div class="editable-cell">
                        <div v-if="editableData.data" class="editable-cell-input-wrapper">
                          <a-input v-model:value="editableData.zcdz" @pressEnter="save()" />
                        </div>
                        <div v-else class="editable-cell-text-wrapper">
                          {{formState.zcdz}}
                        </div>
                      </div>
                    </a-descriptions-item>
                    <a-descriptions-item label="组建单位">
                      <div class="editable-cell">
                        <div v-if="editableData.data" class="editable-cell-input-wrapper">
                          <a-input v-model:value="editableData.zjdw" @pressEnter="save()" />
                        </div>
                        <div v-else class="editable-cell-text-wrapper">
                          {{formState.zjdw}}
                        </div>
                      </div>
                    </a-descriptions-item>
                    <a-descriptions-item label="组建文件"  :span="3">
                      <div class="editable-cell">
                        <div v-if="editableData.data" class="editable-cell-input-wrapper">
                          <!--                    <template>-->
                          <a-upload
                            action="http://localhost:9292/api/sys/oss/upload?bcpath=frxx"
                            :multiple="true"
                            :file-list="fileList"
                            :headers="headers"
                            @change="handleChange"
                          >
                            <a-button>
                              <upload-outlined></upload-outlined>
                              上传
                            </a-button>
                          </a-upload>
                        </div>
                        <div v-else class="editable-cell-text-wrapper">
                          <a-upload v-model:file-list="fileList" :showUploadList={showRemoveIcon:false}></a-upload>
                        </div>
                      </div>
                    </a-descriptions-item>
                    <a-descriptions-item label="单位人数" >
                      <div class="editable-cell">
                        <div v-if="editableData.data" class="editable-cell-input-wrapper">
                          <a-input v-model:value="editableData.dwrs" @pressEnter="save()" />
                        </div>
                        <div v-else class="editable-cell-text-wrapper">
                          {{formState.dwrs}}
                        </div>
                      </div>
                    </a-descriptions-item>
                    <a-descriptions-item label="专业人数" :span="3">
                      <div class="editable-cell">
                        <div v-if="editableData.data" class="editable-cell-input-wrapper">
                          <a-input v-model:value="editableData.zyrs" @pressEnter="save()" />
                        </div>
                        <div v-else class="editable-cell-text-wrapper">
                          {{formState.zyrs}}
                        </div>
                      </div>
                    </a-descriptions-item>

                    <a-descriptions-item label="经营范围" :span="3">
                      <div class="editable-cell">
                        <div v-if="editableData.data" class="editable-cell-input-wrapper">
                          <a-textarea v-model:value="editableData.jyfw" @pressEnter="save()" />
                        </div>
                        <div v-else class="editable-cell-text-wrapper">
                          {{formState.jyfw}}
                        </div>
                      </div>
                    </a-descriptions-item>
                  </a-descriptions>
                  <a-descriptions title="" bordered>
                    <a-descriptions-item label="主要负责人" :span="3">
                      <a-button type="primary" class="editable-add-btn" @click="handleAdd1">新增</a-button>
                      <a-table :dataSource="dataSource1" :columns="columns1" />
                    </a-descriptions-item>
                    <a-descriptions-item label="技术负责人" :span="3">
                      <a-button type="primary" class="editable-add-btn" @click="handleAdd2">新增</a-button>
                      <a-table :dataSource="dataSource2" :columns="columns2" />
                    </a-descriptions-item>
                    <a-descriptions-item label="财务负责人" :span="3">
                      <a-button type="primary" class="editable-add-btn" @click="handleAdd3">新增</a-button>
                      <a-table :dataSource="dataSource3" :columns="columns3" />
                    </a-descriptions-item>
                  </a-descriptions>
                </a-col>
              </a-row>

            </a-tab-pane>
            <a-tab-pane key="2" tab="资质信息" force-render>
              <a-table :dataSource="dataSource" :columns="columns" />
            </a-tab-pane>
            <a-tab-pane key="3" tab="人员信息" force-render>
              <a-descriptions title="" bordered>
                <!--                <a-descriptions-item label="主要负责人" :span="3">-->
                <!--                  <a-table :dataSource="dataSource2" :columns="columns2" />-->
                <!--                </a-descriptions-item>-->
                <!--                <a-descriptions-item label="技术负责人" :span="3">-->
                <!--                  <a-table :dataSource="dataSource2" :columns="columns2" />-->
                <!--                </a-descriptions-item>-->
                <!--                <a-descriptions-item label="财务负责人" :span="3">-->
                <!--                  <a-table :dataSource="dataSource2" :columns="columns2" />-->
                <!--                </a-descriptions-item>-->
                <a-descriptions-item label="工程专业技术人员" :span="3">
                  <a-table :dataSource="dataSource2" :columns="columns2" />
                </a-descriptions-item>
              </a-descriptions>
            </a-tab-pane>
            <!--            <a-tab-pane key="4" tab="工程业绩" force-render>-->
            <!--              <a-table :dataSource="dataSource3" :columns="columns3" />-->
            <!--            </a-tab-pane>-->
          </a-tabs>
        </a-card>
      </a-col>
    </page-layout>
    <!-- 人员信息编辑 -->
    <renyuanedit :visible="wzstate.visibleEdit" @close="closeEdit" :record="state.record"></renyuanedit>
  </div>
</template>
<script>

import renyuanedit from './modal/renyuanedit';
import {computed, reactive, ref, toRaw} from 'vue';
import request from "@/api/request";
import global from "@/view/global/global.vue";
import {message} from "ant-design-vue";
import { cloneDeep } from 'lodash-es';

export const faren = data => {
  return request.request({
    url: 'api/project/faren/info',
    params: data,
    method: 'GET'
  })
}

export const list = data => {
  return request.request({
    url: 'api/project/faren/list',
    params: data,
    method: 'GET'
  })
}

export const saveObj = data => {
  if(data.id!=null&&data.id.length>0){
    return request.request({
      url: '/api/project/faren/edit',
      data: data,
      method: 'PUT'
    })
  }else{
    return request.request({
      url: '/api/project/faren/save',
      data: data,
      method: 'POST'
    })
  }
}
export default {
  components: {
    renyuanedit,
  },
  mounted() {
    this.getData((res) => {
      this.loading = false;
      this.data = res.results;
    });
  },
  methods: {
    getData(callback) {
      var response = list();
      callback(response);
    }
  },
  setup(){

    var data = ref();
    var loading = ref(true);

    //页面编辑
    const visible = ref(false);
    const hide = () => {
      delete editableData.data;
      visible.value = false;
    };
    const fileList = ref([]);
    const jsfileList = ref([]);
    const editableData = reactive({});
    const formState = reactive({});
    //根据id获取法人信息
    list({'xmid':global.xmid}).then((response)=> {
      let farenlist = response.data;
      if (farenlist.length > 0) {
        Object.assign(formState, farenlist[0]);
        console.log(formState);
        if(formState.zjwj!=null&&formState.zjwj.length>0){
          fileList.value=[];
          let files=formState.zjwj.split(',');
          for(let i=0;i<files.length;i++){
            global.fileList({'id':files[i]}).then((response)=>{
              let file={
                uid: i+1,
                name: response.data[0].name,
                status: 'done',
                url: response.data[0].path,
              }
              fileList.value.push(file);
            })
          }

        }
        if(formState.jsfzrZhichengwj!=null&&formState.jsfzrZhichengwj.length>0){
          jsfileList.value=[];
          let files=formState.jsfzrZhichengwj.split(',');
          for(let i=0;i<files.length;i++){
            global.fileList({'id':files[i]}).then((response)=>{
              let file={
                uid: i+1,
                name: response.data[0].name,
                status: 'done',
                url: response.data[0].path,
              }
              jsfileList.value.push(file);
            })
          }
        }
      }else{
        formState.xmid = global.xmid;
      }
    })

    const edit = () => {
      Object.assign(editableData, formState);
      editableData.data='true';
    };
    const save = () => {
      console.log(toRaw(editableData));
      delete editableData.data;
      saveObj(toRaw(editableData)).then((response)=>{
        if(response.success){
          message.success({ content: '保存成功', duration: 1 }).then(()=>{
            Object.assign(formState, editableData);
            hide();
          });
        }else{
          message.error({ content: '保存失败', duration: 1 }).then(()=>{
            console.log(response);
          });
        }
      })

    };

    list({'id':global.xmid}).then((response)=>{
      if (response.data != null&&response.data.gcgm.search("大") != -1){
        formState.gcgm="1";
      }
    });

    //文件上传
    const state = reactive({
      visibleUpload: false,
      param:'',
    })
    const Upload = function(param){
      state.visibleUpload = true;
      state.param = param;
    }
    const closeUpload = function(){
      state.visibleUpload = false
      state.param = '';
    }
    const tokenKey = localStorage.getItem("token_key");
    const token = localStorage.getItem("token");
    const headers = {
      "Authorization": token,
      "Authorization-key": tokenKey
    };
    const handleChange = info => {
      let resFileList = [...info.fileList];
      let fileids="";
      resFileList = resFileList.map(file => {
        if (file.response) {
          file.url = file.response.data.path;
          if(fileids.length>0){
            fileids += "," + file.response.data.id;
          }else{
            fileids += file.response.data.id;
          }
        }
        return file;
      });
      editableData.zjwj=fileids;
      fileList.value = resFileList;
    };
    const handleChangejs = info => {
      let resFileList = [...info.fileList];
      let fileids="";
      resFileList = resFileList.map(file => {
        if (file.response) {
          file.url = file.response.data.path;
          if(fileids.length>0){
            fileids += "," + file.response.data.id;
          }else{
            fileids += file.response.data.id;
          }
        }
        return file;
      });
      editableData.jsfzrZhichengwj=fileids;
      jsfileList.value = resFileList;
    };

    const loadData = async function(){
      var response = await list();
      data.value = response.data;
      loading.value = false;
    }

    const columns2= [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
      },
      {
        title: '职务',
        dataIndex: 'zhiwu',
        key: 'zhiwu',
      },
      {
        title: '职称',
        dataIndex: 'zhicheng',
        key: 'zhicheng',
      },
      {
        title: '到岗时间',
        dataIndex: 'dgsj',
        key: 'dgsj',
      },
      {
        title: '离岗时间',
        dataIndex: 'lgsj',
        key: 'lgsj',
      },
    ]

    const dataSource1= ref([]);
    const dataSource3= ref([]);
    const dataSource2= ref([
      {
        key: '1',
        name: '刘*生',
        sex: '男',
        zhiwu: '总工程师',
        zhicheng: 'D261301481',
        dgsj: '2019-03-19',
        lgsj: '2022-12-31',
      },
      {
        key: '2',
        name: '王**',
        sex: '男',
        zhiwu: '总工程师',
        zhicheng: 'D261301481',
        dgsj: '2019-03-19',
        lgsj: '2022-12-31',
      },
    ]);
    const count1 = computed(() => dataSource1.value.length + 1);
    const count2 = computed(() => dataSource2.value.length + 1);
    const count3 = computed(() => dataSource3.value.length + 1);
    const handleAdd1 = () => {
      const newData = {
        key: `${count1.value}`,
        name: '',
        sex: '',
        zhiwu: '',
        zhicheng: '',
        dgsj: '',
        lgsj: '',
      };
      dataSource1.value.push(newData);
    };
    const editableData1 = reactive({});
    const edit1 = key => {
      editableData1[key] = cloneDeep(dataSource1.value.filter(item => key === item.key)[0]);
    };
    const save1 = key => {
      Object.assign(dataSource1.value.filter(item => key === item.key)[0], editableData1[key]);
      delete editableData1[key];
    };
    const onDelete1 = key => {
      dataSource1.value = dataSource1.value.filter(item => item.key !== key);
    };
    loadData();
    // const edit = function(){
    //   state.visibleEdit = true;
    // }
    const closeEdit = function(){
      state.visibleEdit = false;
    }
    /// 外置参数
    const wzstate = reactive({
      selectedRowKeys: [],
      param: {},
      record: {},
      visibleSave: false,
      visibleEdit: false,
      visibleGive: false,
      visibleInfo: false,
      recordEdit: {},
      recordGive: {},
      recordInfo: {},
    })
    return {
      visible,
      hide,
      formState,
      editableData,
      loading,
      data,
      dataSource2,
      columns2,
      state,
      edit,
      closeEdit,
      save,
      fileList,
      jsfileList,
      handleChange,
      handleChangejs,
      headers,
      wzstate,
      Upload,
      closeUpload,
    };
  }
};
</script>
<style>
.demo-loadmore-list {
  min-height: 350px;
}
</style>
